﻿@model PictureLinkCollectionModel

@using Telerik.Web.Mvc.UI;

@Html.ValidationSummary(true)
@Html.HiddenFor(model => model.Id)

@Html.Telerik().TabStrip().Name("picturelinkcollection-edit").Items(x =>
{
    var tabInfo = x.Add().Text(T("Admin.Media.PictureLink.Collection.Info").Text).Content(TabInfo().ToHtmlString());

    TabStripItemBuilder tabPictures = null;
    if (Model.Id > 0)
        tabPictures = x.Add().Text(T("Admin.Catalog.Products.Pictures").Text).Content(TabPictures().ToHtmlString());

    var selectedTab = (string)ViewData["selectedTab"];
    switch (selectedTab)
    {
        case "info":
            tabInfo.Selected(true);
            break;
        case "pictures":
            tabPictures.Selected(true);
            break;
        default:
            tabInfo.Selected(true);
            break;
    }
    //generate an event
    EngineContext.Current.Resolve<IEventPublisher>().Publish(new AdminTabStripCreated(x, "picturelinkcollection-edit"));
})

@helper TabInfo()
{
    <table class="adminContent">
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.SystemName):
            </td>
            <td class="adminData">
                @Html.EditorFor(model => model.SystemName)
                @Html.ValidationMessageFor(model => model.SystemName)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.PictureDisplayType):
            </td>
            <td class="adminData">
                @if (Model.PictureDisplayTypeOptions != null && Model.PictureDisplayTypeOptions.Count() > 0)
                {
                    foreach (var typeOption in Model.PictureDisplayTypeOptions)
                    {
                    <input type="checkbox" name="SelectedPictureDisplayTypeOptions" value="@typeOption"
                           @if ((Model.PictureDisplayType & typeOption) == typeOption) { <text> checked="checked" </text>      } />@typeOption.ToString()
                        <br />
                    }
                }
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.RelatedContentCategory):
            </td>
            <td class="adminData">

                @(Html.Telerik().DropDownListFor(model => model.RelatedContentCategory)
                .Name("RelatedContentCategory")
                .BindTo(Model.RelatedContentCategories)
                .Placeholder(T("Admin.Media.PictureLink.Collection.SelectContentCategories").Text)
                .CascadeTo("RelatedContentId")
                )

                @Html.ValidationMessageFor(model => model.RelatedContentCategory)
            </td>
        </tr>
        <tr>
            <td class="adminTitle">
                @Html.NopLabelFor(model => model.RelatedContentId):
            </td>
            <td class="adminData">

                @(Html.Telerik().DropDownListFor(model => model.RelatedContentId)
                .Name("RelatedContentId")
                .DataBinding(binding => binding.Ajax().Select("_GetDropDownListContents", "Media"))
                .Placeholder(T("Admin.Media.PictureLink.Collection.SelectContent").Text)
                )

                @Html.ValidationMessageFor(model => model.RelatedContentId)
            </td>
        </tr>
    </table>
}

@helper TabPictures()
{
    if (Model.Id > 0)
    {
        var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Common.AdminAreaSettings>().GridPageSize;

        <table class="adminContent">
            <tr>
                <td>
                    @(Html.Telerik().Grid<PictureLinkModel>()
                        .Name("picturelinks-grid")
                        .DataKeys(x =>
                        {
                            x.Add(y => y.Id).RouteKey("Id");
                        })
                        .Columns(columns =>
                        {
                            columns.Bound(x => x.Url)
                                .ClientTemplate("<a href='<#= Url #>' target='_blank'><img alt='<#= PictureId #>' src='<#= ImageUrl #>' width='150' height='120' /><a/>")
                                .ReadOnly();
                            columns.Bound(x => x.SystemName);
                            columns.Bound(x => x.DisplayText)
                                .Centered();
                            columns.Bound(x => x.Visible)
                                .Template(x => x.Visible.ToString().ToLower())
                                .Centered();
                            columns.Bound(x => x.DisplayOrder)
                                .Centered();
                            columns.Command(commands =>
                            {
                                commands.Edit().Text(T("Admin.Common.Edit").Text);
                                commands.Delete().Text(T("Admin.Common.Delete").Text);
                            });
                        })
                        .Editable(x =>
                        {
                            x.Mode(GridEditMode.InLine);
                        })
                        .Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Both))
                        .DataBinding(dataBinding =>
                        {
                            dataBinding.Ajax().Select("PictureList", "Media", new { collectionId = Model.Id })
                                .Update("PictureListUpdate", "Media")
                                .Delete("PictureListDelete", "Media");
                        })
                        .EnableCustomBinding(true)
                        .ClientEvents(x => x.OnError("Grid_onError")))
                </td>
            </tr>
        </table>
        <div class="clear">
        </div>
        <p>
            <strong>
                @T("Admin.Media.PictureLink.CreatePictureLink").Text:
            </strong>
        </p>
        <table class="adminContent">
            <tr>
                <td class="adminTitle">
                    @Html.NopLabelFor(model => model.AddPictureLinkModel.SystemName):
                </td>
                <td class="adminData">
                    @Html.EditorFor(model => model.AddPictureLinkModel.SystemName)
                    @Html.ValidationMessageFor(model => model.AddPictureLinkModel.SystemName)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.NopLabelFor(model => model.AddPictureLinkModel.DisplayText):
                </td>
                <td class="adminData">
                    @Html.EditorFor(model => model.AddPictureLinkModel.DisplayText)
                    @Html.ValidationMessageFor(model => model.AddPictureLinkModel.DisplayText)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.NopLabelFor(model => model.AddPictureLinkModel.DisplayOrder):
                </td>
                <td class="adminData">
                    @Html.EditorFor(model => model.AddPictureLinkModel.DisplayOrder)
                    @Html.ValidationMessageFor(model => model.AddPictureLinkModel.DisplayOrder)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.NopLabelFor(model => model.AddPictureLinkModel.Url):
                </td>
                <td class="adminData">
                    @Html.EditorFor(model => model.AddPictureLinkModel.Url)
                    @Html.ValidationMessageFor(model => model.AddPictureLinkModel.Url)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.NopLabelFor(model => model.AddPictureLinkModel.Alt):
                </td>
                <td class="adminData">
                    @Html.EditorFor(model => model.AddPictureLinkModel.Alt)
                    @Html.ValidationMessageFor(model => model.AddPictureLinkModel.Alt)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.NopLabelFor(model => model.AddPictureLinkModel.PictureId)
                </td>
                <td class="adminData">
                    @Html.EditorFor(model => model.AddPictureLinkModel.PictureId)
                    @Html.ValidationMessageFor(model => model.AddPictureLinkModel.PictureId)
                </td>
            </tr>
            <tr>
                <td class="adminTitle">
                    @Html.NopLabelFor(model => model.AddPictureLinkModel.Visible):
                </td>
                <td class="adminData">
                    @Html.EditorFor(model => model.AddPictureLinkModel.Visible)
                    @Html.ValidationMessageFor(model => model.AddPictureLinkModel.Visible)
                </td>
            </tr>

            <tr>
                <td colspan="2" align="left">
                    <input type="button" id="createpicturelink" class="t-button" value="@T("Admin.Media.PictureLink.CreatePictureLink")" />
                </td>
            </tr>
        </table>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#createpicturelink').click(function () {
                    var pictureLinkSystemName = $("#@Html.FieldIdFor(model => model.AddPictureLinkModel.SystemName)").val();
                    var pictureLinkDisplayText = $("#@Html.FieldIdFor(model => model.AddPictureLinkModel.DisplayText)").val();
                    var pictureLinkDisplayOrder = $("#@Html.FieldIdFor(model => model.AddPictureLinkModel.DisplayOrder)").val();
                    var pictureLinkUrl = $("#@Html.FieldIdFor(model => model.AddPictureLinkModel.Url)").val();
                    var pictureLinkAlt = $("#@Html.FieldIdFor(model => model.AddPictureLinkModel.Alt)").val();
                    var pictureLinkPictureId = $("#@Html.FieldIdFor(model => model.AddPictureLinkModel.PictureId)").val();
                    var pictureLinkVisible = $("#@Html.FieldIdFor(model => model.AddPictureLinkModel.Visible)").is(':checked');

                    $('#createpicturelink').attr('disabled', true);
                    $.ajax({
                        cache: false,
                        type: "POST",
                        url: "@(Url.Action("CreatePictureLink", "Media"))",
                        data: {
                            "systemName": pictureLinkSystemName, "displayText": pictureLinkDisplayText, "displayOrder": pictureLinkDisplayOrder,
                            "url": pictureLinkUrl, "alt": pictureLinkAlt, "pictureId": pictureLinkPictureId,
                            "visible": pictureLinkVisible, "collectionId": @Model.Id
                        },
                        success: function (data) {
                            if (data.Message == "Success") {
                                var picturelinksGrid = $("#picturelinks-grid");
                                picturelinksGrid.data('tGrid').ajaxRequest();
                                $('#createpicturelink').attr('disabled', false);
                                alert('Successfully to add picture link.');
                            }
                            else {
                                if (data.Message == "Empty") {
                                    alert('Url can not be null.');
                                }
                                else if (data.Message == "False") {
                                    alert('Failed to add picture link.');
                                }

                                $('#createpicturelink').attr('disabled', false);
                            }

                        },
                        error: function (xhr, ajaxOptions, thrownError) {
                            alert('Failed to add picture link.');
                            $('#createpicturelink').attr('disabled', false);
                        }
                    });
                });
            });

            function Grid_onError(e) {
                alert(e.XMLHttpRequest.responseText);
                e.preventDefault();
            }
        </script>
    }
}